import React from 'react';
import { object } from 'prop-types';
import Image from 'react-uwp/Image';
import { Avatar } from 'antd';
import moment from 'moment';
import Zmage from 'react-zmage';
function renderImg(img, index) {
  return (
    <div className="imgItem" key={index}>
      <Zmage src={img} className="imgCover" />
    </div>
  );
}
function CommentItem({ item }) {
  return (
    <div className="dfc">
      <div className="dfrsc" style={{ margin: '0.4rem 0 0.2rem' }}>
        <Avatar size={32} icon="user" src={item.avatar} />
        <span className="fnormal" style={{ marginLeft: '0.4rem' }}>
          {item.nickname}
        </span>
      </div>
      <div className="cItemContent">
        <p className="fnormal" style={{ marginBottom: '0' }}>
          {item.content}
        </p>
        {item.imgs && item.imgs.length > 0 ? (
          <div className="dfrscw">
            {item.imgs.map((img, index) => renderImg(img, index))}
          </div>
        ) : null}
        <p className="f14 cbb" style={{ marginTop: '0.4rem' }}>
          {moment(item.createTime).format('YYYY-MM-D HH:mm:ss')}
        </p>
      </div>
    </div>
  );
}
const propTypes = {
  item: object.isRequired
};
export default CommentItem;
